 {% load staticfiles %}
<!DOCTYPE html>
<html id="app">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="{% static 'css/semantic.css' %}" media="screen" title="no title">
  <link rel="stylesheet" href="{% static 'css/common.css' %}" media="screen" title="no title">
  <link rel="stylesheet" href="{% static 'css/detail.css' %}" media="screen" title="no title">
  <script type="text/javascript" src="{% static 'js/jquery.js' %}"></script>
  <script type="text/javascript" src="{% static 'js/semantic.js' %}"></script>
  <script type="text/javascript" src="{% static 'js/vue1.js' %}"></script>
  <script src="{% static 'js\reqwest.js' %}"></script>
  <link rel="shortcut icon" type="" href="{% static 'images/python_512px_1118083_easyicon.net.png' %}">
  <link rel="stylesheet" type="text/css" href="{% static 'wangEditor-2.1.22\dist\css\wangEditor.min.css' %}">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.3/js.cookie.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
  <link rel="stylesheet" href="//cdn.bootcss.com/highlight.js/8.5/styles/monokai_sublime.min.css">
  <script src="http://yandex.st/highlightjs/8.0/highlight.min.js"></script>
  <script>
    hljs.initHighlightingOnLoad();
  </script>
  <title>
    <% questions.title %>
  </title>
</head>

<body>
  <div class="top nav">
    <div class="ui fixed borderless menu">
      <div class="logo item">
        <a href="{% url 'home' %}">
          <img src="{% static 'images/logo.png' %}" alt="" class="ui image" />
        </a>
      </div>
      <div class="item">
        <div class="ui icon input">
          <input class="prompt" placeholder="搜索您感兴趣的内容..." type="text">
          <i class="search icon"></i>
        </div>
      </div>
      <a class="item">
        <img src="{% static 'images/question_icon.png' %}" alt="" class="ui image" />
        <span class="nav text">提问</span>
      </a>
      <a class="item">
        <img src="{% static 'images/answer_icon.png' %}" alt="" class="ui image" />
        <span class="nav text">回答</span>
      </a>
      {% if request.user.is_authenticated %}
      <div class="right menu">
          <a class="item" href="">
              <img style="width: 25px; height: 25px;" src="/static/uploads/{{ request.user.profile.avatar }}" alt="" class="ui image" />
              <span class="nav text"> {{ request.user.profile.name }}</span>
          </a>
          <a class="item" href="{% url 'logout' %}">
              <span class="nav text"> 登出</span>
          </a>
      </div>
      {% else %}
      <div class="right menu">
          <a class="item" href="{% url 'Login' %}">
              <span class="nav text"> 登录</span>
          </a>
          <a class="item" href="{% url 'register' %}">
              <span class="nav text"> 注册 </span>
          </a>
      </div>
      {% endif %}
    </div>
  </div>
  <!--菜单结束-->
  <!--问题开始-->
  <div class="question">
    <div class="tag-label">
      <div class="ui circular label">程序员</div>
      <div class="ui circular label">编程</div>
      <div class="ui circular label">Linux</div>
    </div>
    <div class="ui header">
      <h3>
        <% questions.title %>
      </h3>
      <div class="sub header">
        <div class="sub header" v-html="questions.desc">
        </div>
      </div>
    </div>
    <div id="divider">
      <div class="ui divider"></div>
      <div class="ui header number">
        <% questions.answer_counts %>个回答</div>
      <div class="ui divider"></div>
    </div>
  </div>
  <div v-for="answer in questions.question_answer" class="item-answer">
    {% if request.user.is_authenticated %}

    <div class="p-answer">
      <button class="ui icon <% VoteOrNot(answer,{{ request.user.profile.id }},'like') %> button up" type="button" name="button" v-on:click="Vote(answer.id,'like')">
          <img src="{% static 'images/upvote_icon.png' %}" alt="" />
          <div class="number"><% answer.like_counts %></div>
        </button>
      <button class="ui icon <% VoteOrNot(answer,{{ request.user.profile.id }},'dislike') %> button down" type="button" name="button" v-on:click="Vote(answer.id,'dislike') ">
          <img src="{% static 'images/downvote_icon.png' %}" alt="" />
        </button>
    </div>

{% else %}
    <div class="p-answer">
      <button class="ui icon button up" type="button" name="button" v-on:click="Show()">
          <img src="{% static 'images/upvote_icon.png' %}" alt="" />
          <div class="number"><% answer.like_counts %></div>
        </button>
      <button class="ui icon button down" type="button" name="button" v-on:click="Show()">
          <img src="{% static 'images/downvote_icon.png' %}" alt="" />
        </button>
    </div>

{% endif %}

    <div class="c-answer">
      <div class="ui text menu">
        <div class="ui header">
          <% answer.author.name %>,<span> <% answer.author.desc %></span>
            <div class="sub header">
              <div>
                <span v-for="voter in answer.answer_vote">
                <span v-if="voter.vote == 'like'">
                  <% voter.voter.name  %>
                </span>
                </span>
                等人赞同
              </div>
            </div>
        </div>
        <div class="ui image user-icon">
          <a href="/profile/<% answer.author.id %>">
          <img src="<% answer.author.avatar %>" alt="" style="height: 38px;width: 38px" />
          </a>
          <!--<img src="" alt="" style="height: 38px;width: 38px" />-->
        </div>
      </div>
      <div class="r-answer" v-html="answer.content" v-highlightjs>
      </div>
      <br>
      <div class="ui text menu meta-item">
        <div>
          <div class="item">
            发布于
            <% answer.createtime %>
          </div>
        </div>
        <div v-on:click="getComment(answer.id)">
          <a class="item" v-on:click="answer.menu = !answer.menu">
            <div class="ui image">
              <img src="{% static 'images/comment_icon.png' %}" alt="" />
            </div>
            <% answer.comment_counts %> 条评论
          </a>
        </div>

        <div >
          <a v-if="DelOrNot(answer, {{ request.user.profile.id }} )" class="item">
            <span v-on:click="DelAnswer(answer.id)" href="">删除回答</span>
          </a>
        </div>
        

      </div>
      <br>
      <div v-if="answer.menu" class="ex-comment">
        <div class="ui segment" style="overflow:auto;margin-top:0;position:relative;">
          <div class="ui comments">
            <div class="comment" v-for="comment in comments">
              <a class="avatar">
                <img v-bind:scr="comment.author.avatar" alt="" style="height: 24px;width: 24px" /></a>
              <div class="content">
                <a class="author">
                  <% comment.author.name %>
                </a>
                <div class="text">
                  <% comment.content %>
                </div>
                <div class="actions">
                  <span class="date" style="color: grey;"><% comment.createtime %></span>
                </div>
              </div>
            </div>
            <div class="ui divider"></div>
            <form class="ui reply form">
              <div class="ui input" style="width:100%;">
                <input type="text" v-model="comment_content">
              </div>
              {% if request.user.is_authenticated %}
              <div v-on:click="addComment(answer.id)" class="ui button" style="float: right;color:#fff;background-color:#3e78ad;margin-top:14px;">评论</div>
              <button class="ui button" style="float: right;background-color:#ffffff;margin-top:14px;">取消</button>
              {% else %}
              
              <div  class="ui button" style="float: right;background-color:#ffffff;margin-top:14px;"><a href="/login">评论前请先登录</a> </div>

              {% endif %}
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

  <br>

</html>
</div>
</div>
</div>
</div>
</div>
<br>


 {% if request.user.is_authenticated %}
<div v-if="AnswerOrNot({{ request.user.profile.id }})" class="reply-input">
  <div class="ui divider"></div>
  <div class="ui segment">
    <h5 class="ui center aligned grey header">一个问题你只能回答一次，但你可以删除原答案重新提交</h5>
  </div>
</div>

<div v-else class="reply-input">
  <div class="ui text menu">
    <div class="header item">
      <a href="#">{{ request.user.profile.name }}</a><span>   ,{{ request.user.profile.desc }}</span>
    </div>
    <div class="right menu">
      <div class="ui image">
        <img style="height: 32px;width: 32px" src="/static/uploads/{{ request.user.profile.avatar }}" alt="" />
      </div>
    </div>
  </div>
  <div class="ui card" style="width:120%;">
    <textarea id="editor-trigger" style="height: 300px"></textarea>
  </div>
  <button class="ui button" v-on:click="AddAnswer(newanswer)">发布回答</button>
</div>

{% else %}
<div class="reply-input">
  <div class="ui divider"></div>
  <div class="ui segment">
    <h5 class="ui center aligned grey header">回答问题请 <a href="/login">登录</a></h5>
  </div>
</div>
{% endif %}
<!--正文结束-->
<!--页脚-->
<div class="zh-footer">
  <div class="ui divider"></div>
  <span class="f-left">Developed by 姚航</span>
  <span class="f-middle">
          <span href="#" target="_blank">关于我们 .</span>
  <span href="#" target="_blank">加入我们 .</span>
  <span href="#" target="_blank">联系我们</span>
  </span>
  <span class="f-right">京ICP备15047012号-2 </span>
</div>


<div class="ui small modal" id='modal2'>
    <div class="header">
        麻瓜问答
    </div>
    <div class="content" style="text-align: center;">
        <p>提问前请登录</p>
    </div>
    <div class="actions">
        <div class="ui negative left button">
            不，谢谢
        </div>
        <a href="/login">
            <div class="ui positive right button">
                登录
            </div>
        </a>
    </div>
  </div>




<script type="text/javascript" src="{% static 'wangEditor-2.1.22\dist\js\wangEditor.js' %}"></script>
<script>
  Vue.config.delimiters = ['<%', '%>'];
  Vue.directive('highlightjs', function () { //添加Vue的自定义指令，新增一个语法高亮的highlightjs
    let blocks = this.el.querySelectorAll('pre code');
    Array.prototype.forEach.call(blocks, hljs.highlightBlock);
  });
  str = window.location.href //获取当前的url
  var id = str.split("/")[4] // 分割url，获取ID
  var vm = new Vue({
    el: "#app",
    data: {
      questions: [],
      answer: [],
      id: this.id,
      comments: [],
      editorContent: '',
      vote_list: [],
      answerOrNot: '',
    },
    methods: {
      getQuestion: function () {
        var self = this;
        reqwest({
          url: '/api/detail_question_api/' + self.id, //将id放进请求的参数里
          type: 'json',
          method: 'get',
          headers: Cookies.get('token') ? {
            'Authorization': 'Token ' + Cookies.get('token')
          } : {},
          success: function (resp) {
            console.log(resp)
            for (var i = 0; i < resp.question_answer.length; i++) {
              resp.question_answer[i]['menu'] = false;
            }
            self.questions = resp
          },
        })
      },

      getComment: function (answer_id) {
        var self = this;
        reqwest({
          url: '/api/comment/' + answer_id, //传入的是anwser的id，不是question的
          type: 'json',
          method: 'get',
          headers: Cookies.get('token') ? {
            'Authorization': 'Token ' + Cookies.get('token')
          } : {},
          success: function (resp) {
            console.log(resp);
            self.comments = resp
          }
        })
      },
      addComment: function (answer_id) {
        var self = this;
        reqwest({
          url: '/api/new_comment_api',
          type: 'json',
          method: 'post',
          headers: Cookies.get('token') ? {
            'Authorization': 'Token ' + Cookies.get('token')
          } : {},
          data: {
            content: self.comment_content,
            answer_id: answer_id,
          },
          success: function (resp) {
            console.log(resp);
            self.getComment(answer_id);
            self.getQuestion()
          }
        })
      },
      Vote: function (answer_id, vote) {
        var self = this;
        reqwest({
          url: '/api/vote/',
          type: 'json',
          method: 'post',
          headers: Cookies.get('token') ? {
            'Authorization': 'Token ' + Cookies.get('token')
          } : {},
          data: {
            answer_id: answer_id,
            vote: vote,
          },
          success: function (resp) {
            console.log(resp);
            self.getQuestion()
          },
          error:function(resp) {
            alert('失败')
          }
        })
      },
      AddAnswer: function () {
        var self = this;
        reqwest({
          url: '/api/addanswer/',
          type: 'json',
          method: 'post',
          headers: Cookies.get('token') ? {
            'Authorization': 'Token ' + Cookies.get('token')
          } : {},
          data: {
            content: self.editorContent,
            question_id: self.id,
          },
          success: function (resp) {
            console.log(resp);
            self.getQuestion()
          }
        })
      },

      DelAnswer: function (id) {
        reqwest({
          url: '/api/deleanswer/' + id,
          type: 'json',
          method: 'delete',
          headers: Cookies.get('token') ? {
            'Authorization': 'Token ' + Cookies.get('token')
          } : {},
          success: function (resp) {
            console.log(resp);
            self.getQuestion()
          }
        })
      },

      VoteOrNot: function (answer, user_id,vote) {
        for (var i = 0; i < answer.answer_vote.length; i++) {
          if (answer.answer_vote[i].vote == vote && answer.answer_vote[i].voter.id == user_id) {
            return 'active'
            
          } else {
            return ''
          }
        }
      },
      AnswerOrNot: function (user_id) {
        for (var i = 0; i < this.questions.question_answer.length; i++) {
          if (this.questions.question_answer[i].author.id == user_id) {
            return true
          } 
        }
      },
      Show :function () {
        $('#modal2 > .content > p').text('点赞前请先登录')
        $('#modal2').modal('show')
      }
      // DelOrNot: function (answer, user_id) {
      //   alert(answer)
      //   console.log(answer.length)
      //   console.log(user_id.length)
      //   for (var i = 0; i < answer.length; i++) {
      //     alert(answer[i])
      //     if (answer[i].author.id == user_id) {
      //       alert(true)
      //       return true
      //     } else {
      //       alert(false)
      //       return false
      //     }
      //   }
      // },
    },
    computed: {

    },
    ready: function () {
      this.getQuestion();
      //以下为加载富文本编辑器的代码
      var self = this;
      var editor = new wangEditor('editor-trigger');
      editor.onchange = function () {
        self.editorContent = editor.$txt.html();
      };
      editor.config.menus = [ //配置显示的菜单
        'bold',
        'underline',
        'italic',
        'strikethrough',
        'forecolor',
        '|',
        'unorderlist',
        'orderlist',
        'img',
        '|', // '|' 是菜单组的分割线
        'quote',
        'insertcode',
        'fullscreen',
      ];
      editor.create()
      //以上为加载富文本编辑器的代码
    }

  })
</script>
</body>

</html>
